import React from "react";
import { Modal, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import LinearGradient from "react-native-linear-gradient";

import { getffly } from "../../utils/common";
import screen from "../../utils/screen";

const mainWidth = screen.width - screen.PIXEL_120
const contentWidth = screen.width - screen.PIXEL_240

export default  class AlertModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,

            content: '',
            title: '',
            actions: [],
            showcolse: false,
            type: 0,

            maxheight:null
        };

    }
    componentDidMount = () => {

    }
    componentWillMount = () => {

    }
    componentWillUnmount = () => {

    }
    hideDialog = () => {
        this.setState({ modalVisible: false });
    }
    showDialog = () => {

        this.setState({ modalVisible: true });
    }

    alert = (title, content, actions) => {


        let defaultActions = [{title:'OK',onPress:this.hideDialog}];

        this.setState({
            modalVisible: true,
            maxheight:null,
            title: title,
            content: content,
            actions:actions.length > 0 ? actions : defaultActions,
            type: 1
        });
    }

    renderContent(){
        var twidth = contentWidth;
        if (this.state.actions.length > 1) {
            twidth = screen.PIXEL_230;
        }

        return (
                <View style={{ width:mainWidth, backgroundColor: '#FFFFFF', alignItems: 'center', borderRadius: screen.PIXEL_40, paddingHorizontal:screen.PIXEL_60 }}>

                    <Text style={{fontFamily:getffly("medium"), fontSize: 18, color: '#377C74', marginTop:screen.PIXEL_50 }}>{this.state.title}</Text>

                    <View style={{width:contentWidth,height:this.state.maxheight?this.state.maxheight:screen.PIXEL_100,marginTop:screen.PIXEL_40,alignItems:'center'}}>
                        <ScrollView
                            bounces={false}
                            horizontal={false}
                            //showsVerticalScrollIndicator={true}
                            keyboardShouldPersistTaps={'always'}
                            style={{flex:1,marginBottom:10}}
                            contentContainerStyle={{
                                //paddingVertical:screen.PIXEL_200,
                            }}
                        >
                            <View style={{width:contentWidth,alignItems:'center'}}
                                  onLayout={(event) => {
                                      let height1 = event.nativeEvent.layout.height;
                                      console.log("height1",height1);
                                      console.log("content",this.state.content);
                                      if(height1 > screen.PIXEL_500) {
                                          if(!this.state.maxheight){
                                              this.setState({
                                                  maxheight: screen.PIXEL_500
                                              });
                                          }
                                          console.log("height1A");
                                      }
                                      else {
                                          console.log("height1B");
                                          if(!this.state.maxheight)
                                          {
                                              if(height1 < screen.PIXEL_120)
                                              {
                                                  this.setState({
                                                      maxheight: screen.PIXEL_120
                                                  });
                                              } else
                                              {
                                                  this.setState({
                                                      maxheight: height1
                                                  });
                                              }
                                          }
                                      }
                                  }}>

                                <Text style={{textAlign: 'left',width:contentWidth,fontFamily:getffly("regular"), fontSize:14, color: "#7B9695", lineHeight: screen.PIXEL_40}}>{this.state.content}</Text>

                            </View>
                        </ScrollView>
                    </View>

                    <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: screen.PIXEL_50, marginBottom: screen.PIXEL_50, height: screen.PIXEL_90 }}>
                        {
                            this.state.actions.length > 0 &&
                            <TouchableOpacity
                                activeOpacity={0.7}
                                onPress={() => {
                                    this.state.actions[0].onPress()
                                }} >
                                {
                                    this.state.actions.length > 1 && (
                                        <View style={{ width: twidth, height: screen.PIXEL_90, justifyContent: 'center', alignItems: 'center', borderColor: '#3F8A83', borderWidth: 1, borderRadius: screen.PIXEL_90/2 }}>
                                            <Text style={{ fontWeight: '600', fontSize: 18, color: '#3F8A83',  }}>{this.state.actions[0].title}</Text>
                                        </View>
                                    )
                                }
                                {
                                    this.state.actions.length === 1 && (
                                        <LinearGradient colors={['#68B3AC', '#377C74']}
                                                        start={{ x: 0, y: 1 }}
                                                        end={{ x: 1, y: 0 }}
                                                        locations={[0, 1]}
                                                        style={{ width: twidth, height: screen.PIXEL_90, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_90/2 }}>
                                            <Text style={{ fontFamily:getffly("medium"), fontSize: 18, color: '#FFFFFF' }}>{this.state.actions[0].title}</Text>
                                        </LinearGradient>
                                    )
                                }
                            </TouchableOpacity >
                        }
                        {
                            this.state.actions.length > 1 &&
                            <TouchableOpacity
                                activeOpacity={0.7}
                                style={{ marginLeft: screen.PIXEL_20 }}
                                onPress={() => {
                                    this.state.actions[1].onPress()
                            }} >
                                <LinearGradient colors={['#68B3AC', '#377C74']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: twidth, height: screen.PIXEL_90, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_90/2 }}>
                                    <Text style={{ fontFamily:getffly("medium"), fontSize:18, color: '#FFFFFF'}}>{this.state.actions[1].title}</Text>
                                </LinearGradient>
                            </TouchableOpacity >
                        }
                    </View>


                </View>
        )
    }

    render() {


        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this._setModalVisible(false) }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />

                <View style={styles.container}>
                    {
                        this.state.type == 1 && this.renderContent()
                    }

                </View>


            </Modal>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 99,
        backgroundColor: 'rgba(16, 17, 22, 0.75)',
    },
    innerContainer: {
        borderRadius: 10,
        alignItems: 'center',
    },
    bottomcontainer: {
        zIndex: 99,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22, 0.75)',
        justifyContent: 'flex-end',
    },
    content:{
        flex:1,
        backgroundColor:'#ff00ff',
    },

});

